<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>理疗管理系统</title>

	<link type="text/css" rel="stylesheet" href="../css/bootstrap.css"/>
	<link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css"/>
	<link type="text/css" rel="stylesheet" href="../css/bootstrap-theme.min.css"/>
	<link type="text/css" rel="stylesheet" href="../css/bootstrap-treeview.min.css"/>
	<link type="text/css" rel="stylesheet" href="../css/site.css"/>
	<link type="text/css" rel="stylesheet" href="../css/dialog.css"/>
	<link type="text/css" rel="stylesheet" href="../css/jquery.range.css"/>
	<link type="text/css" rel="stylesheet" href="../css/mycss/index.css"/>

	<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
	<script type="text/javascript" src="../js/jquery.dialog.js"></script>
	<script type="text/javascript" src="../js/jquery.range.js"></script>
</head>
<body>
	<!-- 导航条开始 -->
	<nav>
		<div class="nav-left">
			门店管理系统
		</div>
		<div class="nav-right">
			<a href="#">
				登录
				<span class="caret"></span>
			</a>
		</div>
	</nav>
	<!-- 导航条结束 -->

	<!-- 内容区开始 -->
	<div class="container-fluid">
		<div class="row container-left">			
			<!-- 左侧区域开始 -->
			<div class="col-sm-3">
				<div class="list-group">
		            <a href="#" class="list-group-item active">
		            	<span class="glyphicon glyphicon-user"></span>
		            	用户维护
		            </a>
		            <a href="#" class="list-group-item">
		            	<span class="glyphicon glyphicon-user"></span>
		            	门店维护
		            </a>
		            <a href="#" class="list-group-item">
		            	<span class="glyphicon glyphicon-user"></span>
		            	理疗项目维护
		            </a>
		            <a href="#" class="list-group-item">
		            	<span class="glyphicon glyphicon-user"></span>
		            	列会员维护
		            </a>
		            <a href="#" class="list-group-item">
		            	<span class="glyphicon glyphicon-user"></span>
		            	会员健康及消费信息
		            </a>
		            <a href="#one" class="list-group-item"  data-toggle="collapse">
		            	<span class="glyphicon glyphicon-user"></span>
		            	字典维护
		            	<span class="caret"></span>
		            </a>
		            <div id="one" class="panel-collapse collapse">
						<a href="#" class="list-group-item">
			            	+会员类型
			            </a>
			            <a href="#" class="list-group-item">
			            	+健康信息项目
			            </a>
			            <a href="#" class="list-group-item">
			            	+来源渠道
			            </a>
						</div>		   			
			            <a href="#" class="list-group-item">
			            	<span class="glyphicon glyphicon-user"></span>
			            	营业记录
			            </a>
		        </div>
			</div>
			<!-- 左侧区域结束 -->
			<!-- 右侧区域开始 -->
			<div class="col-sm-9">
				<!-- 上面开始 -->
				<div class="top">
					<a href="#">
		            	<span class="glyphicon glyphicon-user"></span>
		            	用户维护
		            </a>
				</div>
				<!-- 上面结束 -->
				<!-- 下面开始 -->
				<div class="container-fluid bottom">
					<!-- 按钮开始 -->
					<a href="#" class="btn btn-warning" data-toggle="modal" data-target="#myModal-details">详情</a>
					<a href="#" class="btn btn-success">重置</a>
					<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#myModal-delete">删除</a>
					<a href="#" class="btn btn-default">编辑</a>
					<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal-new">新建</a>
					<!-- 按钮结束 -->
					<!-- 表格开始 -->
					<table class="data-table">
			            <thead>
			                <tr>
			                    <th><input type="checkbox"></th>
			                    <th>用户名</th>
			                    <th>姓名</th>
			                    <th>性别</th>
			                    <th>出生年月</th>
			                    <th>手机号码</th>
			                    <th>角色</th>
			                    <th>门店</th>
			                </tr>
			            </thead>
			            <tbody>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr> 
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			               <tr>
				               	<td><input type="checkbox"></td>
				               	<td>zhangsan</td>
				               	<td>张三</td>
				               	<td>男</td>
				               	<td>1990-12-06</td>
				               	<td>13811112222</td>
				               	<td>普通用户</td>
				               	<td>朝阳区望京大商子店</td>
			               </tr>
			            </tbody>
			        </table>
					<!-- 表格结束 -->
					<!-- 分页开始 -->
					<div class="pages">
						<div class="pages-left fl">
							<input type="button" value="跳转" class="btn fr">
							<!-- <div class="number fr"></div> -->
							<input type="text" class="number fr">
							<div class="text fr">共100条记录 共10页</div>
						</div>
						<div class="fr">
							<ul class="pagination fr">
								<li>
									<a href="#" class="arrow arrow-left">&lt;</a>
								</li>
								<li>
									<a href="#"  class="active">1</a>
								</li>
								<li>
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<li>
									<a href="#">4</a>
								</li>
								<li>
									<a href="#">5</a>
								</li>
								<li>
									<a href="#">......</a>
								</li>
								<li>
									<a href="#" class="arrow arrow-right">&gt;</a>
								</li>
							</ul>
						</div>												
					</div>				
					<!-- 分页结束 -->
				</div>
				<!-- 下面结束 -->				
			</div>
			<!-- 右侧区域结束 -->
		</div>
	</div>
	<!-- 内容区结束 -->

	<!-- 新建模态层开始 -->
	<div class="modal fade" id="myModal-new">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>新建<span class="red">用户</span></h4>
				</div>
				<div class="modal-body">
					<form class="form-inline">
						<div class="form-group">
							<label for="">用户名&nbsp;&nbsp;</label>
							<input type="text" class="form-control">	
						</div>
						<div class="form-group">
							<label for="">姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<input type="text" class="form-control">	
						</div>
						<div class="form-group">
							<label for="">性别&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<select name="sex"  class="form-control" style="width:179px;">
								<option value="boy" selected>男</option>
								<option value="girl">女</option>
							</select>
						</div>
						<div class="form-group">
							<label for="">出生年月</label>
							<input type="text" class="form-control">
							<span class="glyphicon glyphicon-th"></span>	
						</div>
						<div class="form-group">
							<label for="">手机号&nbsp;&nbsp;</label>
							<input type="text" class="form-control">	
						</div>
						<div class="form-group">
							<label for="">角色&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<select name="role"  class="form-control" style="width:179px;">
								<option value="">--请选择角色--</option>
								<option value="ordinary-user">普通用户</option>
								<option value="super-user">超级用户</option>
							</select>	
						</div>
						<div class="form-group">
							<label for="">门店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<select name="role" class="form-control" style="width:179px;">
								<option value="">--请选择门店--</option>
								<option value="store1">朝阳区望京大商子店</option>
								<option value="store2">朝阳区望京大商子店</option>
							</select>	
						</div>	
									
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success">保存</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 新建模态层结束 -->

	<!-- 详情模态层开始 -->
	<div class="modal fade" id="myModal-details">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>详情</h4>
				</div>
				<div class="modal-body">
					<table>
						<tr>
							<td>用户名：zhangsan</td>
						</tr>
						<tr>
							<td>姓名：张三</td>
						</tr>
						<tr>
							<td>性别：男</td>
						</tr>
						<tr>
							<td>出生日期：1990-12-06</td>
						</tr>
						<tr>
							<td>角色：普通用户</td>
						</tr>
						<tr>
							<td>手机号：13811112222</td>
						</tr>
						<tr>
							<td>门店：朝阳区望京大商子店</td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 详情模态层结束 -->

	<!-- 详情模态层开始 -->
	<div class="modal fade" id="myModal-delete">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4>删除<span class="red">用户</span></h4>
				</div>
				<div class="modal-body">
					确定删除<span class="red">张三？</span>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 详情模态层结束 -->
</body>
</html>